<template>
    <!-- 顶部数据卡片区，展示四个统计卡片 -->
    <el-row>
        <animated-number-card
            v-for="(item, index) in dataItems"
            :key="index"
            :title="item.title"
            :icon="item.icon"
            :start-val="item.startVal"
            :end-val="item.endVal"
            :duration="1500"
            :span="6"
            :get-url="item.getUrl"
            :get-unit="item.getUnit"
            @give-url="acceptUrl"
        />
    </el-row>
    <!-- 折线图区域 -->
    <el-row>
        <line-chart :data="chartData" v-if="isChartVisible" />
    </el-row>
    <!-- 其他图表区域：柱状图、雷达图、饼图 -->
    <el-row class="smallAll">
        <div class="small">
            <Histogram></Histogram>
        </div>
        <div class="small">
            <radar-chart></radar-chart>
        </div>
        <div class="small">
            <pie-chart></pie-chart>
        </div>
    </el-row>
    <!-- 表格和便签，仅在非手机端显示 -->
    <el-row class="list" v-if="!isPhone">
        <Table></Table>
        <TimeNotepad></TimeNotepad>
    </el-row>
</template>

<script setup>
// 引入 Element Plus 行组件
import { ElRow } from 'element-plus'
// 引入自定义统计卡片和图表组件
import AnimatedNumberCard from '@/components/AnimatedNumberCard.vue'
import { User, House, TrendCharts, DataAnalysis } from '@element-plus/icons-vue'
import LineChart from '@/components/LineChart.vue'
import Histogram from '@/components/Histogram.vue'
import RadarChart from '@/components/RadarChart.vue'
import PieChart from '@/components/PieChart.vue'
import Table from '@/components/Table.vue'
import TimeNotepad from '@/components/TimeNotepad.vue'
import { ref, watch, onMounted } from 'vue'
import { debounce } from '@/tools/debounce.js'

// 顶部四个数据卡片的数据
const dataItems = [
    {
        title: '数据1',
        icon: User,
        startVal: 0,
        endVal: 172000,
        getUrl: '1',
        getUnit: '个'
    },
    {
        title: '数据2',
        icon: House,
        startVal: 0,
        endVal: 234567,
        getUrl: '2',
        getUnit: '个'
    },
    {
        title: '数据3',
        icon: TrendCharts,
        startVal: 0,
        endVal: 345678,
        getUrl: '3',
        getUnit: '元'
    },
    {
        title: '数据4',
        icon: DataAnalysis,
        startVal: 0,
        endVal: 456789,
        getUrl: '4',
        getUnit: '件'
    }
]

// 控制折线图显示与隐藏（用于刷新）
let isChartVisible = ref(true)
// 折线图的数据
let chartData = ref({
    getUrl: dataItems[0].getUrl,
    unit: dataItems[0].getUnit
})

// 卡片点击后切换折线图数据
function acceptUrl(url, unit) {
    chartData.value.getUrl = url
    chartData.value.unit = unit
    isChartVisible.value = false
    setTimeout(() => {
        isChartVisible.value = true
    }, 10)
}

// 响应式判断是否为手机端
const isPhone = ref(false)
const windowWidth = ref(window.innerWidth)

// 监听页面宽度变化，切换布局
onMounted(() => {
    window.addEventListener('resize', debounce(() => windowWidth.value = window.innerWidth, 200))
})

watch(() => windowWidth.value, newWidth => {
    isPhone.value = newWidth < 768 
}, { immediate: true })
</script>

<style scoped>
/* 小图表区域布局 */
.smallAll {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 2%;
}

.small {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    width: 30%;
    min-width: 300px;
}

/* 表格和便签区域布局 */
.list {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.list>div {
    flex: 1;
    margin: 1%;
}
</style>